const idcMenu = {
    data: function () {
        return {
            items: [],
            menuList: []
        }
    },
    props: {
        collapse: {
            type: [Boolean],
            default: false,
        }
    },
    computed: {
        defaultActive() {
            if (!location.search) {
                return "";
            }
            const res = location.search.substring(1)
                .split("&")
                .map(param => param.split("="))
                .filter(paramArr => paramArr[0] === 'pagePath')[0][1];
            return `/${res}`;
        }
    },
    methods: {
        async initLoadSysMenuList() {
            this.menuList = await sysMenuApi.loadSysMenuList();
        },
        async initRealmDirective() {
            const realmSet = rx.arrayToMap(this.menuList, 'permission')
            /**
             * 注册一个全局自定义指令 `v-realm`
             * 使用示例：
             * v-realm="''abc''"
             * v-realm="'['abc']'"
             */
            Vue.directive('realm', {
                bind(el, binding) {
                    const result = realmSet && realmSet.size > 0 && binding.value.split(',')
                        .filter(rx.CombinedPredicate.not(rx.StringValidator.isBlank))
                        .map(s => s.trim())
                        .every(s => realmSet.has(s))
                    if (!result) {
                        el.style.display = 'none'
                    }
                },
            })
        },
        initRealmTree() {
            // diff 权限列表
            const map = rx.groupBy(this.menuList, ({menuType}) => menuType)
            const menuList = map.get(SysMenu.MenuTypeMenu).filter(({isShow}) => isShow === 1)
            const node = rx.listToTree(menuList)
            this.items = node && node.child ? node.child : [];
        },
        getMenu(createElement) {
            return createElement("el-menu", {
                class: ['sidebar-el-menu'],
                props: {
                    defaultActive: this.defaultActive,
                    collapse: this.collapse,
                    backgroundColor: "#115ab0",
                    textColor: "#62aaff",
                    activeTextColor: "#c0ddff",
                    uniqueOpened: true
                }
            }, this.buildMenu(createElement, this.items));
        },
        view(link, id) {
            forward(link, {_menu_id: id});
        },
        buildMenu(createElement, items) {
            return items.map(item => {
                if (!item.isShow && item.menuType === 1) {
                    return;
                }
                if (item.child && item.child.length > 0) {
                    const a = `<template slot="title">
                        <i class="menu-icon" :class="item.icon"></i>
                    <span slot="title" style="color: #ffffff; font-weight: 600">{{ item.title }}</span>
                </template>`;

                    const text = [];
                    const spanArr = [];
                    if (item.icon) {
                        spanArr.push(
                            createElement('i', {
                                class: ['menu-icon', `${item.icon}`]
                            })
                        )
                    }
                    spanArr.push(
                        createElement(
                            'span',
                            {
                                style: {
                                    color: "#ffffff",
                                    fontWeight: "600"
                                },
                                slot: "title",
                            },
                            [`${item.label}`]
                        )
                    );
                    text.push(
                        createElement(
                            'template',
                            {
                                slot: "title",
                            },
                            spanArr
                        )
                    );
                    let childArr = this.buildMenu(createElement, item.child);
                    childArr = text.concat(childArr);
                    return createElement('el-submenu', {
                            props: {
                                index: `${item.id}`,
                                key: `${item.id}`,
                            },
                        }, [
                            childArr
                        ],
                    );
                } else {
                    const itemArr = [];
                    if (item.icon) {
                        itemArr.push(
                            createElement('i', {
                                class: ['menu-icon', `${item.icon}`]
                            })
                        )
                    }
                    itemArr.push(
                        createElement('template', {slot: "title"}, `${item.label}`)
                    );

                    return createElement(
                        'a',
                        {
                            attrs: {"target": "_blank"},
                            on: {
                                "click": () => {
                                    return this.view(item.link, item.id)
                                }
                            }
                        },
                        [
                            createElement('el-menu-item', {
                                    props: {
                                        index: `${item.link || item.id}`,
                                        key: `${item.link || item.id}`,
                                    },
                                }, itemArr
                            )
                        ]
                    )
                }
            }).filter(dom => dom);
        }
    },
    async created() {
        await this.initLoadSysMenuList();
        await this.initRealmDirective();
        await this.initRealmTree();
    },
    render(createElement) {
        return this.getMenu(createElement);
    },
}
const sidebar = new Vue({
    el: '#sidebar',
    components: {
        'idc-menu': idcMenu,
    },
    data: function () {
        return {
            bus: bus
        }
    },
})